<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>饼图</title>
  <script src="/lib//echarts.min.js"></script>
</head>

<body>
  <div id="main" style="height:400px;width:600px;"></div>
  <script>
    const myEcharts = echarts.init(document.getElementById('main'))
    const pieData = [ // {key: xxx, value: xxx}
      {
        name: '淘宝',
        value: 11231,
        itemStyle: {
          color: 'purple'
        },
        label: {
          color: 'green'
        },
        emphasis: { //高亮样式
          itemStyle: {
            color: 'pink'
          }
        }
      },
      {
        name: '京东',
        value: 23151
      },
      {
        name: '唯品会',
        value: 6251
      },
      {
        name: '1号店',
        value: 8989
      },
      {
        name: '聚美优品',
        value: 6666
      },
    ]
    const option = {
      title: {
        text: '饼图测试标题',
        textStyle: {
          color: 'blue'
        }
      },
      series: [
        {
          type: 'pie',
          data: pieData,
          label: {
            show: true, //显示文字
            // formatter: '哈哈'   文字显示内容
            formatter: arg => {
              return `${arg.name}平台累计消费${arg.value}元,占总消费的${arg.percent}%`
            },
            overflow: 'break' //换行
          },
          // radius: '60%'  //百分比参照的宽度和高度中较小的一半来进行百分比的设置
          // radius: ['50%', '75%']  //['内圆半径', '外圆半径']
          roseType: 'radius', // 南丁格尔图 饼图的每一个区域半径不同
          selectedMode: 'multiple', //选中的效果: 偏离一小段距离 single multiple
          selectedOffset: 20 //偏移距离
        }
      ]
    }
    myEcharts.setOption(option)
  </script>
</body>

</html>